<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>点我一下试试！</button>
    <script>
        /**
         *  事件[Event]:
         * 
         *  事件三要素：
         *    1. 事件对象：事件发生在谁身上
         *    2. 什么事件：事件名
         *    3. 事件处理函数：function(){}
         * 
         *  语法：事件对象.on事件名 = function(){}
         *    解释：事件对象发生该事件后，会执行后面的事件处理函数
         *    事件处理函数中的this指向哪儿？ 指向事件对象
         * 
         *    事件处理函数的执行时机：事件对象身上发生该事件时执行
         * 
         *  onclick: 单击事件
         *  ondbclick: 双击事件
         *  onmouseover: 鼠标移上去会触发
         *  onmousemove: 鼠标移动时不停触发
         *  ..... 
         *  
         */

        // 1. 获取元素标签
        var oBtn = document.querySelector('button');
        // 2. 绑定事件和事件处理函数
        oBtn.onclick = function(){
            console.log('this: ', this);// onclick . 前面的元素对象
            alert('试试就试试');
        }
        console.dir(oBtn);


    </script>
</body>
</html>